<template>
    <div class="users-view">
        <h2>用户管理</h2>
        <div v-if="loading">加载中...</div>
        <div v-else-if="error">{{ error }}</div>
        <div v-else>
            <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                <el-form-item label="ID">
                    <el-input v-model="searchForm.userid" placeholder="用户ID"></el-input>
                </el-form-item>
                <el-form-item label="用户名">
                    <el-input v-model="searchForm.username" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="searchForm.userphone" placeholder="电话"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch">查询</el-button>
                </el-form-item>
            </el-form>
            <div v-if="showSearchResult">
                <UserSearchResult :handleEdit="handleEdit" :handleDelete="handleDelete" />
            </div>
            <div v-else>
                <el-table :data="users" :key="userStore.updateKey" style="width: 100%">
                    <el-table-column prop="userid" label="ID" width="180"></el-table-column>
                    <el-table-column prop="username" label="用户名" width="180"></el-table-column>
                    <el-table-column prop="userphone" label="电话"></el-table-column>
                    <el-table-column label="操作" width="200">
                        <template #default="scope">
                            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <el-dialog title="编辑用户" v-model="dialogVisible" width="30%">
            <el-form :model="userStore.selectedUser" label-width="120px">
                <el-form-item label="用户名">
                    <el-input v-model="userStore.selectedUser.username"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="userStore.selectedUser.userphone"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="saveUser">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useUserStore } from '../../stores/userStore';
import { ElMessage, ElMessageBox } from 'element-plus';
import { storeToRefs } from 'pinia';
import UserSearchResult from './UserSearchResult.vue';

const userStore = useUserStore();
const { users, loading, error } = storeToRefs(userStore);

const dialogVisible = ref(false);
const searchForm = ref({
    userid: '',
    username: '',
    userphone: ''
});
const showSearchResult = ref(false);

onMounted(() => {
    userStore.fetchUsers();
});

const handleEdit = (index, row) => {
    userStore.selectedUser = Object.assign({}, row); // 替代JSON序列化方式
    console.log('回显的用户数据', userStore.selectedUser);
    dialogVisible.value = true;
};

const handleDelete = async (row) => {
    try {
        await ElMessageBox.confirm(
            `确定要删除用户【${row.username}】吗？此操作不可恢复！`,
            '警告',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        );
        await userStore.deleteUser(row.userid);
        ElMessage.success('删除成功');
    } catch (error) {
        if (error !== 'cancel') {
            ElMessage.error('删除失败');
        }
    }
};

const saveUser = async () => {
    try {
        await userStore.updateUser(userStore.selectedUser);
        console.log('当前保存的用户数据', userStore.selectedUser);
        dialogVisible.value = false;
        ElMessage.success('修改成功');
    } catch (e) {
        ElMessage.error('修改失败');
    }
};

const handleSearch = async () => {
    const { userid, username, userphone } = searchForm.value;
    if (userid) {
        await userStore.fetchUserByUserId(userid);
        console.log('根据ID查询的用户数据', userStore.users);
    } else if (username) {
        await userStore.fetchUserByUsername(username);
        console.log('根据用户名查询的用户数据', userStore.users);
    } else if (userphone) {
        await userStore.fetchUserByUserPhone(userphone);
        console.log('根据电话查询的用户数据', userStore.users);
    } else {
        ElMessage.warning('请输入查询条件');
        return;
    }
    showSearchResult.value = true; // 显示查询结果
    console.log('showSearchResult', showSearchResult.value);
};
</script>

<style scoped>
.users-view {
    padding: 2rem;
}
</style>